<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>基础信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell" style="text-align: right;font-weight: bold;">资产总数:</div></td>
                <td class="el-table__cell is-leaf" style="text-align: left" v-if="cache.info">{{ cache.info.total }}</td>
                <td class="el-table__cell is-leaf"><div class="cell" style="text-align: right;font-weight: bold;">最近一次修改密码时间:</div></td>
                <td class="el-table__cell is-leaf" style="text-align: left"  v-if="cache.info">{{ cache.info.time }}</td>
                <td class="el-table__cell is-leaf"><div class="cell" style="text-align: right;font-weight: bold;">密码修改次数:</div></td>
                <td class="el-table__cell is-leaf" style="text-align: left"  v-if="cache.info">{{ cache.info.num }}</td>
              </tr>

              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>接入设备分类统计</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="chart1" style="height: 350px"/>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>密码修改成功失败比例</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="chart2" style="height: 350px"/>
          </div>
        </el-card>
      </el-col>
      <!--el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>设备日志数</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="chart3" style="height: 250px"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>密码类型</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="chart4" style="height: 250px"/>
          </div>
        </el-card>
      </el-col-->
    </el-row>
  </div>
</template>

<script>
  import {getCache,getCache1,getCache2,getCache3,getCache4} from "@/api/monitor/cache";
  import echarts from "echarts";

  export default {
    name: "Server",
    data() {
      return {

        // cache信息
        cache: [],
        chart1: null,
        chart2: null,
        //chart3: null,
        //chart4: null,

      };
    },
    created() {

      this.getList1();
      this.getList2();
      //this.getList3();
      //this.getList4();
      this.openLoading();

    },
    methods: {
      getList1() {
        getCache1().then((response) => {
          this.cache = response.data;
          this.$modal.closeLoading();
          this.chart1 = echarts.init(this.$refs.chart1, "macarons");
          this.chart1.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: "命令",
                type: "pie",
                roseType: "radius",
                radius: [15, 95],
                center: ["50%", "38%"],
                data: response.data.data,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: 'top', //在上方显示
                      textStyle: { //数值样式
                        color: 'black',
                        fontSize: 16
                      },
                      formatter: function(params){
                        var name=params.name; //名字
                        var percent=params.percent; //占比
                        var value=params.value; //数量
                        if(name.length>8){
                          return name.slice(0,7)+"..."+"\n"+"("+value+")"+percent+"%";
                        }else{
                          return name+"\n"+"("+value+")"+percent+"%";
                        }
                      }
                    }
                  }
                },
              },
            ],
          });

        });
      },
      getList2() {
        getCache2().then((response) => {
          this.$modal.closeLoading();
          this.chart2 = echarts.init(this.$refs.chart2, "macarons");
          this.chart2.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: "命令",
                type: "pie",
                roseType: "radius",
                radius: [15, 95],
                center: ["50%", "38%"],
                data: response.data.data,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: 'top', //在上方显示
                      textStyle: { //数值样式
                        color: 'black',
                        fontSize: 16
                      },
                      formatter: function(params){
                        var name=params.name; //名字
                        var percent=params.percent; //占比
                        var value=params.value; //数量
                        if(name.length>8){
                          return name.slice(0,7)+"..."+"\n"+"("+value+")"+percent+"%";
                        }else{
                          return name+"\n"+"("+value+")"+percent+"%";
                        }
                      }
                    }
                  }
                },
              },
            ],
          });

        });
      },
      getList3() {
        getCache3().then((response) => {

          this.$modal.closeLoading()
          this.chart3 = echarts.init(this.$refs.chart3, "macarons");
          // 绘制图表
          this.chart3.setOption({
            title: {

            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: response.data.xdata
            },
            series: [
              {
                type: 'bar',
                barMaxWidth:200,
                data: response.data.seriesData,
                label: {
                  normal: {
                    show: true,
                    position: 'insideRight'
                  }
                },

              }
            ]
          });
        });
      },
      getList4() {
        getCache4().then((response) => {
          //this.$modal.closeLoading();
          this.chart4 = echarts.init(this.$refs.chart4, "macarons");
          // 绘制图表
          this.chart4.setOption({
            tooltip: {},
            xAxis: {
              data: ["导入", "数字", "数字字母"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36]
            }]
          });
        });
      },
      // 打开加载层
      openLoading() {
        this.$modal.loading("正在加载缓存监控数据，请稍候！");
      },
    },
  };
</script>
